<template>
	<view class="cardView">
		<el-card body-class="productView" @click="detailOpen">
			<view class="productImg">
				<image class="img" :src="row.img" mode="widthFix"></image>
			</view>
			<view class="productTitle">{{ row.title }}</view>
			<view class="productText">{{ row.text }}</view>
			<view class="productType">
				<span>材质：{{ row.type }}</span>
				<span>浏览量：{{ row?.num ?? 0 }}</span>
			</view>
		</el-card>
	</view>
</template>

<script setup>
import { ref } from 'vue';
const props = defineProps({
	row: Object
});


const detailOpen = () => {
	console.log(243)
	uni.navigateTo({
		url: `/pages/products/detail?id=${props.row.id}`
	});
};

</script>

<style scoped lang="scss">
.cardView {
	:deep(.el-card) {
		border-radius: 10px;

		// 推荐产品系列
		.productView {
			width: 100%;
			height: auto;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 0 0 20px !important;
			cursor: pointer;

			.productImg {
				width: 100%;
				height: 240px;
				overflow: hidden;
				margin-bottom: 12px;
				display: flex;
				justify-content: center;
				align-items: center;

				.img {
					width: 100%;
					transition: all 0.3s linear;
					
					&:hover{
						transform: scale(1.2);
					}
				}
				
				
			}

			.productTitle {
				width: 100%;
				height: auto;
				font-family: Roboto, Roboto;
				font-weight: 700;
				font-size: 16px;
				color: #000000;
				line-height: 1.6;
				padding: 0 20px;
				box-sizing: border-box;
			}

			.productText {
				width: 100%;
				height: auto;
				font-family: Roboto, Roboto;
				font-weight: 400;
				font-size: 14px;
				color: #4b5563;
				line-height: 1.5;
				padding: 0 20px;
				box-sizing: border-box;
				margin-bottom: 8px;
			}

			.productType {
				width: 100%;
				height: auto;
				font-family: Roboto, Roboto;
				font-weight: 400;
				font-size: 12px;
				color: #6b7280;
				line-height: 1.5;
				padding: 0 20px;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
			}
		}
	}
}
</style>
